<template>
  <div class="user">
    <div class="user-filter">
      <span>筛选条件</span>
      <el-select
        v-model="activityStatus"
        clearable
        style="width:150px;"
        placeholder="活动状态"
        @change="handleFilter"
      >
        <el-option
          v-for="item in activityStatuses"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="user-keyword">
      <span>关键词</span>
      <el-select v-model="indentity" style="width:165px;" @change="handleFilter">
        <el-option
          v-for="item in indentitys"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="content" style="width:200px" placeholder="请输入关键词搜索"/>
      <el-button type="primary" style="margin-left:10px;" plain @click="handleFilter">搜索</el-button>
      <el-button size="medium" type="info" @click="clearParams">清空</el-button>
      <el-button :loading="downloadLoading" type="primary" plain @click="handleExport">导出</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%;margin-top:20px;">
      <el-table-column prop="id" label="代理商编号" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="accountDetail(scope.row)">{{ scope.row.id }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="机构/个人名称" min-width="10" align="center"/>
      <el-table-column prop="identity" label="代理商身份" min-width="10" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.identity === 'org' ? '机构' : '个人' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="活动状态" min-width="10" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status === 1 ? '开启' : '关闭' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="10" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickSet(scope)">设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <Setdialog :data="setDialogVisible" @changeVisiable="changeVisiable"/>
  </div>
</template>

<script>
import Setdialog from './setdialog'
import Pagination from '@/components/Pagination'
import { getTenantId } from '@/utils/auth'
import { getDistributionPersonSetting, saveOrUpdateGlobalForm } from '@/api/distribution/agencysetting'
import { getAgencyManage } from '@/api/distribution/agencymanage'
export default {
  components: {
    Setdialog,
    Pagination
  },
  data() {
    return {
      total: 0,
      currentpage: 1,
      pagesize: 10,
      downloadLoading: false,
      activityStatus: '',
      content: '',
      indentity: '',
      setDialogVisible: {
        dialog: false,
        globalForm: {
          status: true,
          registerAward: true,
          awardCondition: 1,
          awardValueOne: '10',
          awardValueTwo: '10',
          consumeDivide: true,
          buyCourse: true,
          buyClass: true,
          buyMember: false,
          courseRate: '10',
          courseExpiryDate: 1,
          courseCycle: [],
          classRate: '10',
          classExpiryDate: 1,
          classCycle: [],
          memberRate: '10',
          memberExpiryDate: 1,
          memberCycle: [],
          inviteeStatus: true,
          inviteeMoney: '50',
          inviteeDay: '30'
        }
      },
      activityStatuses: [
        {
          label: '启用',
          value: '1'
        },
        {
          label: '禁用',
          value: '0'
        }
      ],
      indentitys: [
        {
          label: '编号',
          value: 'id'
        },
        {
          label: '名称',
          value: 'name'
        }
      ],
      tableData: [],
      filterData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getAgencyManage(getTenantId()).then(res => {
        this.tableData = res.data.items
        this.filterData = res.data.items
        this.total = res.data.items.length
      })
    },
    accountDetail(val) {
      // this.accountDialog.dialog = true
      // this.accountDialog.tableData = val
    },
    handleClickSet(scope) {
      this.setDialogVisible.dialog = true
      getDistributionPersonSetting(scope.row.id).then(res => {
        if (res.data.item) {
          this.setDialogVisible.globalForm = res.data.item
        }
        this.setDialogVisible.globalForm.distributorId = scope.row.id
        this.setDialogVisible.globalForm.courseCycle = [this.setDialogVisible.globalForm.courseStartTime, this.setDialogVisible.globalForm.courseEndTime]
        this.setDialogVisible.globalForm.classCycle = [this.setDialogVisible.globalForm.classStartTime, this.setDialogVisible.globalForm.classStartTime]
        this.setDialogVisible.globalForm.memberCycle = [this.setDialogVisible.globalForm.memberStartTime, this.setDialogVisible.globalForm.memberEndTime]
      })
    },
    // dialog子组件触发的函数
    changeVisiable(val) {
      this.setDialogVisible.dialog = false
      if (val) {
        saveOrUpdateGlobalForm(val).then(res => {
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
          this.getData()
        })
      }
    },
    handleFilter() {
      this.tableData = this.filterData.filter(item => {
        if (this.activityStatus && item.status !== this.activityStatus) return false
        if (this.indentity === 'id' && item.id.toString().toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        if (this.indentity === 'name' && item.name.toLocaleLowerCase().indexOf(this.content.toLocaleLowerCase()) < 0) return false
        return true
      })
      this.total = this.tableData.length
    },
    clearParams() {
      this.activityStatus = ''
      this.indentity = ''
      this.content = ''
      this.getData()
    },
    handleExport() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['代理商账号', '机构/个人名称', '注册奖励金额', '消费奖励分成', '奖励用户', '活动状态']
        const filterVal = []
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'agencyManageList',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  &-filter,
  &-keyword {
    font-size: 14px;
    color: #606266;
    margin: 15px 0;
    span {
      margin-right: 10px;
    }
  }
}
</style>
